<template>
    <!-- 通知管理搜索  -->
    <div class="em-search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="年级班级：">
                <el-select placeholder="年级班级" v-model="a">
                    <el-option label="三年级一班" value="3-1" />
                    <el-option label="三年级二班" value="3-2" />
                </el-select>
            </el-form-item>
            <el-form-item label="学生姓名：">
                <el-input placeholder="学生姓名" v-model="b" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 通知管理列表 -->
    <div class="em-list">
        <div class="em-list-fabu"><el-button type="primary" @click="jump"> 发布评语</el-button>
        </div>
        <div class="em-list-table">
            <el-table :data="evaluate" border style="width: 100%;  font-size: 10px;">
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="student.name" label="学生姓名" width="80" />
                <el-table-column label="年级班级" width="110">
                    <template #default="scope">
                        {{ nian.gradeId[scope.row.student.classes.gradeId] + nian.classId[scope.row.student.classes.classId]
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="评价类型" width="80">
                    <template #default="scope">
                        {{ evaluateType.find((item: any) => item.id == scope.row.typeId).name }}
                    </template>
                </el-table-column>
                <el-table-column prop="detail" label="评价内容" />
                <el-table-column prop="score" label="分值" width="80" />
                <el-table-column prop="teacher.name" label="发布者" width="80" />
                <el-table-column prop="time" label="发布时间" width="150" />
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <a @click="remove(scope.row.id)">删除</a> <a @click="chakan(scope.row.id)">查看</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="em-list-fenye">
            <!-- <div class="jump">
                <el-pagination layout="prev, pager, next" background :total="page * 10"
                    @current-change="handleCurrentChange" />
                <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
                <span>跳至</span>
                <el-input v-model="input" />
                <span>页</span>
                <el-button @click="jump1">确定</el-button>
                <el-select v-model="select" placeholder="6页/条 " style="width: 115px">
                    <el-option label="5页/条" value="5" @click="fn" />
                    <el-option label="7页/条" value="7" @click="fn" />
                    <el-option label="8页/条" value="8" @click="fn" />
                </el-select>
            </div> -->
        </div>
        <div>
            <el-drawer v-model="drawer" :with-header="false">
                <div style="border-bottom: 1px solid black; padding-bottom: 5px;">查看评价</div>
                <el-form v-model="chankanlist" :inline="true" class="chankan">
                    <el-form-item label="">
                        <ul>
                            <li>{{ biao + "/" + nian.gradeId[biaogradeId] +
                                nian.classId[biaoclassId] }} </li>
                            <li style="font-size: 12px;">{{ biaotea + ":" + chankanlist.time }}</li>
                        </ul>
                    </el-form-item>
                    <el-form-item label="评价类型:">
                        {{ chankanname }}
                    </el-form-item>

                    <el-form-item label="分值：">
                        {{ chankanlist.score }}
                    </el-form-item>

                    <el-form-item label="评价内容：">
                        {{ chankanlist.detail }}
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script  setup lang="ts" >
import server from '@/api/index';
import { reactive, toRefs, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

let evaluate: any = ref([])
let evaluateType: any = ref([])
var router = useRouter()
let a = ref()
let b = ref()
let drawer = ref(false)
var chankanname = ref()
var biao = ref()
var biaotea = ref()
var biaogradeId = ref()
var biaoclassId = ref()


let chankanlist: any = ref({})


// const cp = ref('1')
// const ps = ref('5')
// const input = ref('')
// const page = ref('')
// const select = ref('')
// const value = ref('')


const nian: any = ref(
    {
        gradeId: {
            3: '三年级',
            2: '二年级',
            1: '一年级'
        },
        classId: {
            3: '三班',
            2: '二班',
            1: '一班'
        }

    })

var xi: any
onMounted(async () => {
    var rew = await server.zcg.evaluate_getEvaluateByPage()
    evaluate.value = rew.data.data.date
    // page.value = rew.data.data.page.pages
    // console.log(rew.data.data.date);
    xi = rew.data.data.date
    var rew = await server.zcg.evaluateType_getEvaluateTypeAll()
    evaluateType.value = rew.data.data
    // console.log(rew.data.data);
})


var onSubmit = () => {
    const ex = JSON.parse(JSON.stringify(xi))
    if (a.value) {
        var gradeId = a.value.split('-')[0]
        var classId = a.value.split('-')[1]
        evaluate.value = ex.filter((item: any) => item.student.classes.gradeId == gradeId && item.student.classes.classId == classId)
    }
    if (b.value) {
        // console.log(b.value);
        evaluate.value = ex.filter((item: any) => item.student.name.includes(b.value))
    }
}

var remove = async (id: any) => {
    var rew = await server.zcg.evaluate_deleteEvaluate(id)
    // console.log(rew);
    const ex = JSON.parse(JSON.stringify(xi))
    evaluate.value = ex.filter((item: any) => item.id != id)
}

var reset = async () => {
    a.value = ''
    b.value = ''
    var rew = await server.zcg.evaluate_getEvaluateByPage()
    evaluate.value = rew.data.data.date
}

var jump = () => {
    router.push('/pingjiafabu')
}

var chakan = async (id: any) => {
    drawer.value = true
    var rew = await server.zcg.evaluate_getEvaluateById(id)
    // console.log(rew.data.data);
    chankanlist.value = rew.data.data[0]
    // console.log(chankanlist);
    chankanname = evaluateType.value.find((item: any) => item.id == chankanlist.value.typeId).name
    // console.log(chankanlist.value.sId);
    biao = chankanlist.value.student.name
    biaotea = chankanlist.value.teacher.name
    // console.log(biao);
    biaogradeId = chankanlist.value.student.classes.gradeId
    biaoclassId = chankanlist.value.student.classes.classId
}


// async function fn() {
//     ps.value = select.value
//     var rew = await server.zcg.evaluate_getEvaluateByPage({ cp: cp.value, ps: ps.value })
//     evaluate.value = rew.data.data.date
//     page.value = rew.data.data.page.pages
//     console.log(rew.data.data.date);
// }
// //点击切换页数
// const handleCurrentChange = async (val) => {
//     cp.value = val
//     var rew = await server.zcg.evaluate_getEvaluateByPage({ cp: cp.value, ps: ps.value })
//     evaluate.value = rew.data.data.date
//     page.value = rew.data.data.page.pages
// }

// //跳转页数
// async function jump1() {
//     if (input.value > page.value) {
//         // ElNotification.success({ message: '请输入正确页数' });
//         input.value = ''
//         return
//     }
//     cp.value = input.value
//     // reduce()
//     var rew = await server.zcg.evaluate_getEvaluateByPage({ cp: cp.value, ps: ps.value })
//     evaluate.value = rew.data.data.date
//     input.value = ''
// }

</script>

<style scoped lang="scss">
/* 通知管理搜索 */
.em-search {
    height: 100px;
    background: #fff;
    margin-bottom: 15px;
    display: flex;
    justify-content: start;
    align-items: center;

    .demo-form-inline {
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        margin-left: 20px;
        width: 81%;
        padding-top: 5px;
    }
}


/* 通知管理列表 */
.em-list {
    height: 530px;
    background: #fff;
    padding: 20px;
    position: relative;

    .em-list-fabu {
        text-align: right;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .em-list-fenye {
        margin-top: 15px;
        display: flex;
        justify-content: end;
        position: absolute;
        right: 15px;
        bottom: 20px;

        .jump {
            display: flex;
            justify-content: flex-end;
            align-items: center;



            .el-input {
                width: 5%;
            }

            span,
            .el-select {
                margin: 0px 10px;
            }
        }



    }

    a {
        cursor: pointer;
        margin-left: 10px;
    }

    a:hover {
        color: aqua;
    }

    .chankan {
        display: flex;
        flex-direction: column;
        padding-top: 20px;

        .el-form-item__content {
            display: flex;
            flex-direction: column;
        }
    }
}
</style>